<template>
	<div>
		<transition name="nav" @enter="enter">
			<div class="content-nav-list" ref="scroll">
				<div :class="{'content-nav-list-item': true, 'active': index == navIndex}" v-for="(item, index) in navList" @click="tab(index)">
					{{item}}
				</div>
			</div>
		</transition>
		<div class="mui-content mui-scroll-wrapper" id="pullrefresh">
			<div class="mui-scroll">
				<div v-show="navIndex == 0">
					<div class="mui-slider" id="slider">
						<div class="mui-slider-group">
							<!--第一个内容区容器-->
							<!--<div class="mui-slider-item mui-slider-item-duplicate">
							      <img :src="lastImg"/>
							    </div>-->
							<div class="mui-slider-item">

								<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@2x.png" />
							</div>
							<!--<div class="mui-slider-item mui-slider-item-duplicate">
							      <img :src="firstImg"/>
							    </div>-->
						</div>
						<div class="mui-slider-indicator">
							<div :class="{'mui-indicator': true,  'mui-active': true}"></div>
						</div>
					</div>
					<div class="row">
						<div class="row-img">
							<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@3x.png" />
						</div>
						<div class="more">
							<span>查看更多</span>
							<img src="../../static/img/icon/release_icon/arrow@3x.png" />
						</div>
						<div class="list-nav">
							<div>攻略</div>
						</div>
						<div class="list">
							<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@3x.png" />
							<div class="index-item">
								<div class="title">
									大神教你怎么挣大钱
								</div>
								<div class="content">
									<div class="left">
										<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@3x.png" />
									</div>
									<div class="right">
										<div>撒娇等哈说尽快的哈数据库的骄傲咖啡机卡三等奖海口市的发挥就卡死的回复就爱看哈撒地方尽快哈房间卡建行卡放大镜</div>
										<div class="bottom">
											<div>
												<img src="../../static/img/icon/find_icon/collection@3x.png" />
												<div class="margin-left">0</div>
											</div>
											<div>
												<img src="../../static/img/icon/find_icon/pinglun_luntan@2x.png" />
												<div class="margin-left">12</div>
											</div>
											<div>
												<img src="../../static/img/icon/my_icon/heart_luntan@2x.png" />
												<div class="margin-left">66</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div v-show="navIndex != 0">
					<div class="mui-slider" id="slider1">
						<div class="mui-slider-group">
							<!--第一个内容区容器-->
							<!--<div class="mui-slider-item mui-slider-item-duplicate">
							      <img :src="lastImg"/>
							    </div>-->
							<div class="mui-slider-item">
								<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@2x.png" />
							</div>
							<!--<div class="mui-slider-item mui-slider-item-duplicate">
							      <img :src="firstImg"/>
							    </div>-->
						</div>
						<div class="mui-slider-indicator">
							<div :class="{'mui-indicator': true,  'mui-active': true}"></div>
						</div>
					</div>
					<div class="row">
						<div class="list">
							<div class="item" @click="go('forumDetail',1,'select')">
								<div class="left">
									<div class="bold">sasdasdgsf</div>
									<div class="content">neirong</div>
									<div class="bottom">
										<div>
											<img src="../../static/img/icon/find_icon/comment@3x.png" />
											<div>0</div>
										</div>
										<div>
											<img src="../../static/img/icon/find_icon/collection@3x.png" />
											<div>0</div>
										</div>
										<div>
											<img src="../../static/img/icon/find_icon/heart_luntan@3x.png" />
											<div>0</div>
										</div>
									</div>
								</div>
								<div class="right">
									<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@3x.png" />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { getData } from '../service/getData'
	export default {
		data() {
			return {
				navList: ['推荐', '多肉达人', '绿植养护', '温室培养', '群喜绿', '壁纸欣赏'],
				navIndex: 0,
				page: 0
			}
		},
		methods: {
			init() { //默认加载
				getData('/note/appGetNote', {
					page: 1,
					noteType: 4,
					findType: 3,
					chooseId: 1,
					topicId: 0
				}).then(d => {
					
				})
			},
			go(str, id, type) {   //跳转存下标
				sessionStorage.index = 0
				this.route(str, id, type)
			},
			pullupRefresh: function() {  //上拉加载
				mui('#pullrefresh').pullRefresh().endPullupToRefresh();
           	},
           	goItem(index) {
           		this.navIndex = index
           		console.log(index)
           		mui('.mui-slider').slider().gotoItem(index);
           	},
           	tab(index) {
//         		this.$refs.scroll.style.transform = `translateX(${-20 * index}px)`
           		this.navIndex = index
           	},
           	pulldownRefresh() {  //下拉刷新
           		mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
           	},
           	enter(el, done) {
           		el.style.transform = `translateX(${20}px)`
           	},
           	afterEnter() {
           		
           	},
           	leave(el, done) {
           		
           	},
           	afterLeave() {
           		
           	},
		},
		created() {
			for(var i = mui.hooks.inits.length-1,item;i>=0;i--){  //处理上下拉的初始问题
				item=mui.hooks.inits[i];
				if(item.name=="pullrefresh"){
				    item.repeat=true;
				}
			}
		},
		mounted() {
			let _this = this
			this.init()
			
			this.$nextTick(() => {
				//获得slider插件对象
				//mui轮播图
				var slider = mui(".mui-slider");
				slider.slider({
					interval: 1000
				});
				
				//mui下拉加载
				mui.init({
	                pullRefresh: {
	                    container: '#pullrefresh',
	                    up: {//上拉加载
	                    	height: 40,
	                        auto:false,//可选,默认false.自动上拉加载一次
	                        contentrefresh: '正在加载...',
	                        contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
	                        callback: this.pullupRefresh
	                    },
	                    down: {                        
							contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容            
							auto:false,//可选,默认false.自动上拉加载一次
							contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容                        
							contentrefresh: "正在刷新…", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容                                                
							callback: this.pulldownRefresh                 
						}
	                }
	            });
			})
		},
		watch: {
			navIndex(val) { //tab栏移动
				mui('#pullrefresh').scroll().scrollTo(0,0);
				this.$refs.scroll.scrollLeft = 30 * val
			}
		}
	}
</script>

<style scoped lang="less">
	#pullrefresh {
		margin-top: 80px;
	}
	
	.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
        padding: 0 20px;
        height: 38px;
        border-bottom-style: solid;
        border-bottom-width: 0px;
        border-bottom-color: black;
        border-bottom-width: 2px;
    }

    .mui-segmented-control.mui-scroll-wrapper .mui-control-item.mui-active {
        border-bottom-color: blue;
        border-bottom-width: 2px;
    }
	
	.content-nav-list {
		position: fixed;
		display: flex;
		z-index: 2;
		display: -webkit-box;
		overflow-x: scroll;
		top: 50px;
		background: #eee;
		
		.content-nav-list-item {
			text-align: center;
			transition: 0.5s;
			padding: 5px 20px;
		}
		.active {
			font-size: 15px;
			font-weight: bold;
		}
	}
	
	/*隐藏滚动条*/
	.content-nav-list::-webkit-scrollbar {display:none}
	
	.row {
		.row-img {
			padding: 5px 10px;
			background: #fff;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.list-nav {
			padding: 10px;
			background: #fff;
			div {
				padding-left: 10px;
				border-left: 5px solid #2AC845;
			}
		}
		.more {
			width: 100%;
			padding: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #7B7B7B;
			img {
				width: 10px;
				height: 15px;
				margin-top: -2px;
				margin-left: 5px;
			}
		}
		.list {
			img {
				width: 100%;
			}
			.index-item {
				padding: 10px;
				background: #fff;
				margin-bottom: 10px;
				.title {
					font-size: 14px;
					font-weight: bold;
					margin-bottom: 10px;
				}
				.content {
					display: flex;
					.left {
						margin-right: 10px;
						display: flex;
						img {
							width: 120px;
							height: 120px;
						}
					}
					.right {
						position: relative;
						div {
							font-size: 12px;
							color: #7B7B7B;
							display: -webkit-box;
							word-break: break-all;
							text-overflow: ellipsis;
							font-size: 32rpx;
							overflow: hidden;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
						}
						.bottom {
							display: flex;
							width: 100%;
							flex-direction: row-reverse;
							position: absolute;
							bottom: 0;
							div {
								display: flex;
								margin: 0 5px;
								color: #000000;
								align-items: center;
							}
							img {
								width: 15px;
								height: 15px;
							}
						}
					}
				}
			}
			.item {
				display: flex;
				position: relative;
				padding: 5px 10px;
				background: #fff;
				margin-bottom: 1px;
				.left {
					flex: 1;
					div {
						margin-right: 5px;
					}
					.bold {
						font-weight: bold;
						font-size: 14px;
					}
					.content {
						color: #7B7B7B;
						font-size: 12px;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						display: -webkit-box;
						word-break: break-all;
						text-overflow: ellipsis
					}
					.bottom {
						position: absolute;
						bottom: 0;
						display: flex;
						div {
							display: flex;
							align-items: center;
							div {
								line-height: 20px;
							}
						}
						img {
							width: 12px;
							height: 12px;
							margin-right: 5px;
						}
					}
				}
				.right {
					img {
						width: 80px;
						height: 80px;
					}
				}
			}
		}
	}
</style>